<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0;user-scalable=0;" />
<title>填写送货上门信息</title>
<script src="<s:url value="/admin/jquery.mobile/jquery-1.9.1.min.js"/>"></script>
<link href="<s:url value='/admin/jquery.mobile/jquery.mobile-1.4.2.min.css' />" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript" src="<s:url value="/admin/js/ajax.js" />"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("input[type='text']").attr("onfocus", "checkFocusUi(this)");
	var bodyWidth = document.documentElement.clientWidth;
	var popupLeft = ((bodyWidth-300)/2);
	if(popupLeft > 8) {
		$("#popupTips").attr("style", "top: 30%; left:" + popupLeft+ "px;");
	} else {
		$("#popupTips").attr("style", "top: 30%;");
	}
	
 	
});

function selectTime(el) {
	$(el).prev().html($("#select-native-1").val());
	$("#timeTemplateField").val($("#select-native-1").val());
}

function selectCompany(el) {
	var companyField = $("#companyField_" + $("#select-express").val());
	$(el).prev().html(companyField.html());
	$("#companyField").val(companyField.html());
	ajaxPost('<s:url action="getProperty" namespace="/express" />',
		{"companyId": $("#select-express").val()},
		function(response){
			var status = response.status;
			if(status == 200) {
				var selectProperty = $("#select_property");
				selectProperty.empty();
				selectProperty.append("<option value='选择属性' disabled='disabled' selected='selected'>选择属性</option>");
				$("#propertySpan").html("选择属性");
				$.each(response.recordset, function(index, data) {
					selectProperty.append("<option value='"+data.name+"'>"+data.name+"</option>");
				});
			}
		}
	);
}

function selectProperty(el) {
	$(el).prev().html($("#select_property").val());
	$("#propertyField").val($("#select_property").val());
}

function selectCourier(el) {
	$(el).prev().html($("#select-courier").val());
	$("#courierField").val($("#select-courier").val());
}


function checkFocusUi(el) {
    $("input[type='text']").each(function(index,input){
        $(input).parent().removeClass("ui-focus");
    });
    $(el).parent().addClass("ui-focus");
}


function submitForm() {
	var expressNumber = $("#expressNumber");
	if(expressNumber.val() == "") {
		alert("请填写您取件码！");
		expressNumber.focus();
		return;
	}
	var expressPhone = $("#expressPhone");
	if(expressPhone.val() == "") {
		alert("请填写您正确的联系方式！");
		expressPhone.focus();
		return;
	}
	
	if($("#timeTemplateField").val() == "选择时间段" || $("#timeTemplateField").val() == "") {
		alert("请选择时间段！");
		return;
	}
	
	if($("#companyField").val() == "选择快递公司" || $("#companyField").val() == "") {
		alert("请选择快递公司！");
		return;
	}
	
	if($("#propertyField").val() == "选择时间段" || $("#propertyField").val() == "") {
		alert("请选择属性！");
		return;
	}
	
	if($("#courierField").val() == "选择时间段" || $("#courierField").val() == "") {
		alert("请选择配送人员！");
		return;
	}
	
	var expressAddress = $("#expressAddress");
	if(expressAddress.val() == "") {
		alert("请填写您地址，以便我们送货上门！");
		expressAddress.focus();
		return;
	}
	
	$("#expressFrm").submit();
}

function agreeBtn() {
	$("#popupTips").hide();
	$("#popupDialog-screen").hide();
}
</script>
</head>
<body style="margin-left: 5px; margin-right: 5px;">
	<div class="ui-page ui-page-theme-a ui-page-header-fixed ui-page-active" data-role="page" tabindex="0" style="padding-top: 45px; min-height: 347px; display: block;">
		<div class="ui-header ui-bar-b ui-header-fixed slidedown" role="banner" data-role="header">
		    <h1 aria-level="1" role="heading" class="ui-title">填写送货上门信息</h1>
		    <a role="button" data-role="button" class="ui-link ui-btn-left ui-btn ui-icon-carat-l ui-btn-icon-notext ui-shadow ui-corner-all" data-iconpos="notext" data-icon="carat-l" data-rel="back" href="#demo-intro">Back</a>
		    <a role="button" data-role="button" class="ui-link ui-btn-right ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all" data-iconpos="notext" data-icon="back" onclick="window.location.reload()" href="#">Refresh</a>
		</div>
		<s:form id="expressFrm" action="save" namespace="/express" method="post">
		
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px" >
			<label for="textinput-fc">取件码:</label>
			<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
				<input type="text" name="express.number" id="expressNumber" placeholder="手机号码后4位" value="" maxlength="5">
			</div>
		</div>
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px" >
			<label for="textinput-fc">电话:</label>
			<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
				<input type="text" name="express.phone" id="expressPhone" class="ui-icon-phone" placeholder="电话" value="" maxlength="11">
			</div>
		</div>
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px" >
            <label for="select-native-1">送件时间:</label>
            <div class="ui-select">
	            <div id="select-native-1-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
	            	<s:hidden id="timeTemplateField" name="express.time"/>
	            	<span>选择时间段</span>
	            	<select name="select-native-1" id="select-native-1" onchange="selectTime(this)">
	            		<option value="选择时间段" disabled="disabled" selected="selected">选择时间段</option>
	            	<s:iterator value="templates">
	            		<option value="<s:property value="name"/>"><s:property value="name"/></option>
	            	</s:iterator>
	            </select>
	            </div>
            </div>
        </div>
        <div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px" >
            <label for="select-native-2">快递公司:</label>
            <div class="ui-select">
	            <div id="select-native-2-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
	            	<s:hidden id="companyField" name="express.company"/>
	            	<span>选择快递公司</span>
	            	<select name="select-express" id="select-express" onchange="selectCompany(this)">
	            		<option value="选择快递公司" disabled="disabled" selected="selected">选择快递公司</option>
	            	<s:iterator value="companies">
	            		<option id="companyField_<s:property value="entityId"/>" value="<s:property value="entityId"/>"><s:property value="name"/></option>
	            	</s:iterator>
	            </select>
	            </div>
            </div>
            <label for="select-native-2"></label>
            <div class="ui-select">
	            <div id="select-native-3-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
	            	<s:hidden id="propertyField" name="express.property"/>
	            	<span id="propertySpan">选择属性</span>
	            	<select name="select-property" id="select_property" onchange="selectProperty(this)">
	            		<option value="选择属性" disabled="disabled" selected="selected">选择属性</option>
	            </select>
	            </div>
            </div>
        </div>
        <div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px">
            <label for="select-native-1">配送人员:</label>
            <div class="ui-select">
	            <div id="select-native-1-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
	            	<s:hidden id="courierField" name="express.courier"/>
	            	<span>选择配送人员</span>
	            	<select name="select-courier" id="select-courier" onchange="selectCourier(this)">
	            		<option value="选择时间段" disabled="disabled" selected="selected">选择配送人员</option>
	            	<s:iterator value="couriers">
	            		<option value="<s:property value="name"/>"><s:property value="name"/></option>
	            	</s:iterator>
	            </select>
	            </div>
            </div>
        </div>
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px">
			<label for="textinput-fc">地址:</label>
			<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
				<input type="text" name="express.address" id="expressAddress" class="ui-icon-location" placeholder="学校+宿舍区+宿舍号" value="" maxlength="30">
			</div>
		</div>
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px">
			<label for="textinput-fc">备注:</label>
			<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
				<input type="text" name="express.note" id="expressNote" class="ui-icon-location"  value="" maxlength="30">
			</div>
		</div>
		<div style="margin-top: 40px;" style="margin-left: 10px; margin-right: 10px">
			<button class="ui-btn ui-corner-all ui-shadow ui-icon-check ui-btn-icon-left ui-btn-a ui-btn-active" type="button" id="submit-2" onclick="submitForm()" >提交订单</button>
		</div>
		</s:form>
		
		<div class="ui-field-contain" style="margin-left: 10px; margin-right: 10px">
			<s:property value="tips.content" escape="false"/>
		</div>
	</div>
	<div class="ui-popup-screen ui-overlay-b in" id="popupDialog-screen"></div>
	<div id="popupTips" class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup"  tabindex="0">
		<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:300px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
			<div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
				<h1 class="ui-title" role="heading" aria-level="1">代领协议</h1>
			</div>
			<div role="main" class="ui-content">
				<p>同意“闽校通”平台代为领取快递包裹，闽校通有包裹签收、保管、配送的权利。如遇到包裹丢失、破损等问题，闽校通有追查问题的责任和义务，双方经友好协商解决此问题。</p>
				<a href="javascript:" onclick="agreeBtn()" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">同意</a>
		        <a href="javascript:" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">取消</a>
			</div>
		</div>
	</div>
</body>
</html>